<template>
	<view class="order-submission">
		<!-- 收货人地址 start -->
		<view class="allAddress" style="padding: 0.2rem 0;" @click="addressTap">
			<view class="address  acea-row row-between-wrapper">
				<view class="addressCon " v-if="address.mobile">
					<view class="acea-row flex_v_venter row-between-wrapper">
						<view class="address-detail">
							<view class="name">
								{{ address.name }}
								<text class="phone">{{ address.mobile }}</text>
							</view>
							<view class="address-detail-info ellipsis2">{{ address.pca }}/{{ address.address }}</view>
						</view>
						<text>></text>
					</view>
				</view>
				<view class="addressCon flex_v_venter acea-row row-between-wrapper flex_r_between" v-else>
					<view class="setaddress">设置收货地址</view>
					<text>></text>
				</view>
			</view>
		</view>
		<view class="goods">
			<view class="item flex_v_venter" v-for="(item, index) in messageInfo.list" :key="index">
				<image :src="item.thumbnail" mode=""></image>
				<view class="" style="width: 300rpx;">
					<view class="a">{{ item.goodsName }}</view>
					<view class="b">
						<text>规格：{{ item.standardName }}</text>
						<text>数量：{{ item.count }}</text>
					</view>
					<view class="c">
						<text>价格：¥{{ item.retailPrice }}</text>
						<text style="color: #E0BC60;" v-if="item.maxScore > 0">+{{item.maxScore}}积分</text>
					</view>
				</view>
			</view>
		</view>
		<view class="box_price">
			<!-- <view class="flex_r_between">
				<text>小计</text>
				<text>¥ {{messageInfo.finishFee}}</text>
			</view> -->
			<!-- <view class="flex_r_between">
				<text>运费</text>
				<text>免费配送</text>
			</view>
			<view v-if="!messageInfo.isDisplay" class="flex_r_between">
				<text>总市场价</text>
				<text>{{messageInfo.markatFee}}</text>
			</view> -->
			<view v-if="!messageInfo.isDisplay" class="flex_r_between">
				<text>应付现金</text>
				<text>{{messageInfo.cashAmount}}</text>
			</view>
			<view v-if="!messageInfo.isDisplay" class="flex_r_between">
				<text>应付购物券</text>
				<text>{{messageInfo.scoreAmount}}</text>
			</view>
			<view v-if="!messageInfo.isDisplay" class="flex_r_between">
				<text>会员余额</text>
				<text>{{messageInfo.memberCashAmount}}</text>
			</view>
			<view v-if="!messageInfo.isDisplay" class="flex_r_between">
				<text>会员购物券</text>
				<text>{{messageInfo.memberExchangeAmount}}</text>
			</view>
			<view v-if="!messageInfo.isDisplay" class="flex_r_between">
				<text>实付现金</text>
				<text>{{messageInfo.finishCashAmount}}</text>
			</view>
			<view v-if="!messageInfo.isDisplay" class="flex_r_between">
				<text>实付购物券</text>
				<text>{{messageInfo.finishScoreAmount}}</text>
			</view>
		</view>
		<view class="box_price" v-if="messageInfo.isRequiredRemark"
		style="padding: 10rpx;font-size: 26upx;padding-right: 30upx;padding-left: 30upx;">
			<input type="text" v-model="this.remark" placeholder="*请填写型号备注" />
		</view>
		<view class="box_phone"></view>
		<div class="footer flex_r_between acea-row row-between-wrapper">
			<div v-if="messageInfo.isDisplay">
				合计:
				<span class="font-color-red">￥{{ messageInfo.finishCashAmount }}</span>
			</div>
			<view class="" v-else>
				
			</view>
			<div class="settlement" @click="createOrder">立即结算</div>
		</div>
		<pay :show="payShow" @close="payCloseFunc" @emitPassword="emitPassword"></pay>
	</view>
</template>

<script>
import pay from '../../components/payPassword/pay_Password.vue';
export default {
	data() {
		return {
			type: '', //购买方式
			ids: [], //id参数
			count: 1,
			addressInfo: '',
			payShow: false,
			address: {},
			messageInfo: {},
			goodsInfo: [],
			yueObj: {},
			remark: '',
			goodsScore: '', //	积分抵扣金额
			fullReductionFe: '0', //	满减券抵扣金额
			logisticsFee: '', //物流费用
			finishFee: '', //实付金额
			maxSalt: '', //最大使用的盐券
			fee: '', //商品原价
			init: false
		};
	},
	components: {
		pay
	},

	onShow() {},
	onLoad(options) {
		this.messageInfo = JSON.parse(this.$store.state.initOrder);
		this.address = this.messageInfo.address;
		uni.$on('submitAddress', item => {
			console.log(item);
			this.address = item;
			console.log(this.address);
		});
		this.type = options.type;
	},
	beforeDestroy() {
		uni.$off('submitAddress');
	},
	methods: {
		payCloseFunc() {
			this.payShow = false;
		},
		emitPassword(e) {
			this.$ajax('api/Member/VerificationPayPassword', { payPassword: e }).then(res => {
				this.$ajax('api/Order/Pay', this.yueObj).then(pose => {
					uni.showToast({
						title: '支付成功'
					});
					uni.navigateTo({
						url: '../user/order/order'
					});
				});
				this.payShow = false;
			});
		},
		addressTap() {
			uni.navigateTo({
				url: '../user/address/address?type=1'
			});
		},
		getInfo() {
			//购物车购买
			let ids = this.ids.split(','),
				id = [];
			ids.forEach(val => {
				id.push({
					id: val
				});
			});
			let params = {
				list: id
			};
			if (this.type === 'immediately') {
				postOrderPlaceOrderInit({ id: this.ids, count: Number(this.count) })
					.then(res => {
						if (uni.getStorageSync('addressDefault') && JSON.parse(uni.getStorageSync('addressDefault'))) {
							this.addressInfo = JSON.parse(uni.getStorageSync('addressDefault'));
						} else {
							this.addressInfo = res.Data.address;
						}
						this.goodsInfo = res.Data.list;
						// this.addressInfo = res.Data.address;
						this.finishFee = parseFloat(res.Data.finishFee).toFixed(2);
						this.logisticsFee = res.Data.logisticsFee;
						this.goodsScore = res.Data.goodsScore;
						this.maxSalt = res.Data.salt;
						this.fee = res.Data.fee;
					})
					.catch(e => {
						console.log(e);
						uni.showToast({
							title: e.msg,
							duration: 2000,
							icon: 'none'
						});
					});
			} else if (this.type === 'buycart') {
				postOrderShoppingPlaceOrderInit(params)
					.then(res => {
						if (uni.getStorageSync('addressDefault') && JSON.parse(uni.getStorageSync('addressDefault'))) {
							this.addressInfo = JSON.parse(uni.getStorageSync('addressDefault'));
						} else {
							this.addressInfo = res.Data.address;
						}
						this.goodsInfo = res.Data.list;
						// this.addressInfo = res.Data.address;
						this.finishFee = parseFloat(res.Data.finishFee).toFixed(2);
						this.logisticsFee = res.Data.logisticsFee;
						this.goodsScore = res.Data.goodsScore;
						this.maxSalt = res.Data.salt;
						this.fee = res.Data.fee;
					})
					.catch(e => {
						console.log(e);
						uni.showToast({
							title: e.msg,
							duration: 2000,
							icon: 'none'
						});
					});
			}
		},
		//立即结算
		createOrder() {
			let that = this;
			let data = {
				addressID: that.address.id,
				list: that.messageInfo.list,
				isShoppingCar: this.type == 'cart',
				remark:that.remark
			};
			this.$ajax('api/Order/SubmitOrder', data).then(res => {
				uni.showActionSheet({
					itemList: res.Data.dict.map(item => item.value),
					success: tap => {
						let obj = {
							id: res.Data.id,
							category: 10
						};
						if (res.Data.dict[tap.tapIndex].key == 10 || res.Data.dict[tap.tapIndex].key == 30) {
							obj.category = res.Data.dict[tap.tapIndex].key;
							that.yueObj = obj;
							if (that.$store.state.isSetpassword) {
								that.payShow = true;
							} else {
								that.$ajax('api/Order/Pay', that.yueObj).then(pose => {
									uni.showToast({
										title: '支付成功'
									});
									uni.navigateTo({
										url: '../user/order/order'
									});
								});
								// uni.showModal({
								// 	title: '提示',
								// 	content: '您还未设置支付密码，请先去设置支付密码',
								// 	showCancel: false,
								// 	cancelText: '取消',
								// 	confirmText: '确定',
								// 	success: res => {
								// 		if(res.confirm){
								// 			uni.navigateTo({
								// 				url:'../user/setting/setting-password'
								// 			})
								// 		}
								// 	},
								// 	fail: () => {},
								// 	complete: () => {}
								// });
							}

							// that.$ajax('api/Order/Pay',obj).then(pose => {
							// 	uni.showToast({
							// 		title: '支付成功'
							// 	});
							// 	uni.navigateTo({
							// 		url:'../user/order/order'
							// 	})
							// })
						} else {
							obj.category = res.Data.dict[tap.tapIndex].key;
							that.$ajax('api/Order/Pay', obj).then(pose => {
								const result = pose.Data;
								uni.requestPayment({
									timeStamp: result.timeStamp,
									nonceStr: result.nonceStr,
									package: result.package,
									signType: result.signType,
									paySign: result.paySign,

									success: function(res) {
										uni.showToast({
											title: '支付成功',
											duration: 3000,
											icon: 'none'
										});
										uni.navigateTo({
											url: '../user/order/order'
										});
									},
									fail: function(err) {
										uni.showModal({
											content: '支付已取消',
											showCancel: false
										});
										console.log('fail:' + JSON.stringify(err));
									}
								});
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			});
		}
	}
};
</script>

<style lang="scss">
.box_phone {
}
.box_price {
	background: #ffffff;
	border-radius: 26rpx;
	margin: 20rpx 0;
	padding: 0 36rpx;
	& > view {
		height: 90rpx;
		& > text:first-child {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #999999;
		}
		& > text:last-child {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}
	}
}
.goods {
	border-radius: 20rpx;
	background: #fff;
	margin: 20rpx 0 0;
	.item {
		padding: 24rpx 33rpx;
		border-radius: 20rpx;
		background: #fff;
		& > image {
			width: 180rpx;
			height: 180rpx;
		}
		& > view {
			flex: 1;
			margin: 0 0 0 45rpx;
			.a {
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				line-height: 36rpx;
			}
			.b {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				line-height: 48rpx;
				margin: 20rpx 0;
				& > text {
					width: 50%;
					display: inline-block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			.c {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				line-height: 48rpx;
			}
		}
	}
}
/*订单提交*/
.order-submission {
	background: #eaeaec;
	min-height: 100vh;
	padding: 0 30rpx;
	.line {
		height: 3rpx;

		img {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	.address {
		padding: 20rpx 30rpx;
		background-color: #fff;

		.addressCon {
			width: 100%;
			font-size: 26rpx;
			color: #666;

			.name {
				font-size: 28rpx;
				color: #282828;
				margin-bottom: 1rpx;

				.phone {
					margin-left: 26rpx;
					color: #999999;
					font-size: 20rpx;
				}
			}

			.default {
				margin-right: 20rpx;
				margin-top: 50rpx;
				background-color: #fd4610;
				color: #fff;
				width: 64rpx;
				height: 30rpx;
				line-height: 30rpx;
				text-align: center;
				font-size: 20rpx;
				border-radius: 12rpx;
			}

			.setaddress {
				color: #333;
				// font-size: 0.28rem;
			}
		}

		.iconfont {
			font-size: 35rpx;
			color: #707070;
		}
	}

	.wrapper {
		background-color: #fff;
		margin-top: 13rpx;

		.item {
			padding: 27rpx 30rpx;
			font-size: 30rpx;
			color: #282828;
			border-bottom: 1px solid #f0f0f0;

			.discount {
				font-size: 30rpx;
				color: #999;
				width: 500rpx;
				text-align: right;

				.integral {
					margin-right: 40rpx;
				}

				.checkbox-wrapper {
					.icon {
						right: 0;
						left: unset;
					}
				}

				.iconfont {
					color: #515151;
					font-size: 30rpx;
					margin-left: 15rpx;
				}

				.num {
					font-size: 32rpx;
					margin-right: 20rpx;
				}
			}

			textarea {
				background-color: #f9f9f9;
				width: 690rpx;
				height: 14rpx;
				border-radius: 3rpx;
				margin-top: 30rpx;
				padding: 25rpx 28rpx;

				&::placeholder {
					color: #ccc;
				}
			}

			.list {
				margin-top: 35rpx;

				.payItem {
					border: 1px solid #eee;
					border-radius: 6rpx;
					height: 86rpx;
					width: 100%;
					margin-top: 20rpx;
					font-size: 28rpx;
					color: #282828;

					&.on {
						border-color: #fc5445;
						color: #e93323;
					}

					.name {
						width: 50%;
						text-align: center;
						border-right: 1px solid #eee;

						.iconfont {
							width: 44rpx;
							height: 44rpx;
							border-radius: 50%;
							text-align: center;
							line-height: 44rpx;
							background-color: #fe960f;
							color: #fff;
							font-size: 30rpx;
							margin-right: 15rpx;

							&.icon-weixin2 {
								background-color: #41b035;
							}

							&.icon-yinhangqia {
								background-color: #eb6623;
							}
						}
					}

					.tip {
						width: 49%;
						text-align: center;
						font-size: 26rpx;
						color: #aaa;
					}
				}
			}
		}
	}

	.xy-box {
		position: fixed;
		bottom: 100rpx;
		background: #fff;
		left: 0;
		right: 0;
		padding: 30rpx;
		border-top: 1rpx solid #ebedf0;

		.xy-link {
			font-size: 26rpx;
			color: #1989fa;
			flex: 1;
			margin-left: 20rpx;
			margin-right: 300rpx;
		}
	}

	.footer {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #333;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1rpx solid #ebedf0;
		box-sizing: border-box;

		.settlement {
			font-size: 30rpx;
			color: #fff;
			width: 240rpx;
			height: 70rpx;
			background-color: #202029;
			border-radius: 50rpx;
			text-align: center;
			line-height: 70rpx;
		}
	}
}

.order-submission {
	.van-cell {
		font-size: 30rpx;

		&.distributionValue {
			.van-cell__value {
				flex: inherit;
			}
		}
	}

	.wrapper {
		.item {
			.discount {
				input {
					&::placeholder {
						color: #ccc;
					}
				}
			}
		}
	}

	.allAddress {
		width: 100%;
		padding-top: 100rpx;

		.address {
			margin: 30rpx 0 0;
			border-radius: 20rpx;
		}

		.address-detail {
			flex: 1;
			-webkit-flex: 1;
			-o-flex: 1;
			-ms-flex: 1;
			padding-right: 20rpx;
		}

		.line {
			width: 710rpx;
			margin: 0 auto;
		}
	}

	.distribution-tip {
		font-size: 24rpx;
		text-align: right;
		padding-right: 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #999;
	}
}
</style>
